import type { OrganizationTypeItem } from "@/apis/organizationTypeApi";
import { addWorkplaceApi, type WorkplaceType } from "@/apis/workplaceApi";
import useFindData from "@/hooks/useFindData";
import { Cascader, Form, Input, Modal, Select } from "antd"
import { forwardRef, useEffect, useImperativeHandle, useState, type Ref } from "react"

// 定义子组件暴露给父组件的数据的类型
export interface WorkplaceRef {
    // name :string;
    // age: number;
    openModal: (item?: WorkplaceType) => void
}


const WorkplaceForm = (_props: any, ref: Ref<WorkplaceRef>) => {
    const [open, setOpen] = useState(false);
    const { findCountryHook, countryData, findCityHook, cityData, findOrganizationTypeHook, organizationTypeData } = useFindData();
    const [form] = Form.useForm();

    useEffect(() => {
        if (open) {
            findCountryHook();
            findOrganizationTypeHook();
        }
    }, [open])

    const onOk = () => {
        // 触发表单的提交事件
        form.submit();
    }

    const onFormFinish = async (values: any) => {
        const res = await addWorkplaceApi(values);
        console.log(res);
    }

    const onCancel = () => {
        setOpen(false);
    }

    const openModal = (item?: WorkplaceType) => {
        if (item) {
            form.setFieldsValue({
                ...item,
                organizationTypeId: (item.organizationTypeId as OrganizationTypeItem)._id
            });
        }
        setOpen(true);
    }

    // 暴露内容给父组件
    useImperativeHandle(ref, () => {
        return {
            openModal
        }
    })

    // 当用户切换国家
    const onCountryChange = (value: string) => {
        // 当换了一个新的国家后，清空之前选择的城市
        form.resetFields(['city']);
        findCityHook({ name: value })
    }




    return (
        <Modal title="新增工作地点" width={500} open={open} onOk={onOk} onCancel={onCancel}>
            <Form form={form} name="workplace" labelCol={{ style: { width: 90 } }} onFinish={onFormFinish}>
                <Form.Item name="name" label="工作地点" rules={[
                    { required: true, message: '工作地点不能为空' }
                ]}>
                    <Input allowClear />
                </Form.Item>
                <Form.Item name="country" label="国家/城市" rules={[
                    { required: true, message: '国家/城市不能为空' }
                ]}>
                    <Select options={countryData} fieldNames={{
                        label: 'name', value: 'name'
                    }} allowClear onChange={onCountryChange} />
                </Form.Item>

                <Form.Item name="city" label="所在城市" rules={[
                    { required: true, message: '所在城市不能为空' }
                ]}>
                    <Cascader options={cityData} fieldNames={{
                        label: 'name', value: 'name', children: 'response_data'
                    }} />
                </Form.Item>

                <Form.Item name="organizationTypeId" label="组织类型">
                    <Select options={organizationTypeData.rows} fieldNames={{
                        label: 'name', value: '_id'
                    }} allowClear />
                </Form.Item>
            </Form>
        </Modal>
    )
}

// HOC：高阶组件
export default forwardRef(WorkplaceForm)